<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
		<style type="text/css">
				
			.main{
				display: flex;
				overflow-y: hidden;
			}
			#inner{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left" style="width: 200px;height: 100vh; background: #dadada;">
				<ul class="nav nav-pills nav-stacked nav-pills-stacked-example" style="position:absolute; top: 50px;width: 200px;">
				      <li role="presentation" id="item0"><a href="#">首页</a>
					  
					  <ul id="inner" class="nav nav-pills nav-stacked nav-pills-stacked-example">
					  	<li role="presentation"><a href="#">菜品1</a></li>
						<li role="presentation"><a href="#">菜品2</a></li>
						<li role="presentation"><a href="#">菜品3</a></li>
						
						
						
						
					  </ul>
					  
					  </li>
				      <li role="presentation" id="item1"><a href="#">菜品</a></li>
				      <li role="presentation" id="item2"><a href="#">员工</a></li>
					  <li role="presentation" id="item3"><a href="#">客户</a></li>
					  <li role="presentation" id="item4"><a href="#">订单</a></li>
					  <li role="presentation" id="item5"><a href="#">流水</a></li>
				    </ul>
			</div>
			<div class="right" style="width: calc(100vw - 200px); ">
				<nav class="navbar navbar-default navbar-fixed-right" style="margin: 0;border:0;">
				      <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
				      <div class="container-fluid">
				        <div class="navbar-header">
				          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6" aria-expanded="false">
				            <span class="sr-only">Toggle navigation</span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
				          </button>
				          <a class="navbar-brand" href="#">Brand</a>
				        </div>
				
				        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
				          <ul class="nav navbar-nav" style="float: right;">
				            <li class="active"><a href="#">商品</a></li>
				            <li><a href="#">Link</a></li>
				            <li><a href="#">Link</a></li>
				          </ul>
				        </div><!-- /.navbar-collapse -->
				      </div>
				    </nav>
					<ol class="breadcrumb" style="border: 0;">
						<li><a href="goods.html">首页</a></li>
						<li class="active" id="pageTitle">商品列表</li>
					</ol>
					<iframe src="goods.html" id="frameId" width="100%" style="height:calc(100vh - 118px) ;" frameborder="0"></iframe>
			</div>
		</div>
		<script type="text/javascript" src="../../static/js/jquery-3.6.0.min.js">
			
		</script>
		<script type="text/javascript">
			$(function(){
				$('#item0').click(function(){
					$('#frameId').attr('src','goods.html')
					//$('#pageTitle').hide()
					$('#item0').addClass('active')
					$(this).siblings().removeClass('active')
					$('#inner').slideToggle(300,function(res){
						
						console.log(res)
					})
					
					
				})
				
				$('#item1').click(function(){
					$('#frameId').attr('src','http://127.0.0.1:8001/show')
					$('#pageTitle').html('表单1')
					$(this).addClass('active')
					$(this).style=
					$(this).siblings().removeClass('active')
					
					
				})
				$('#item2').click(function(){
					$('#frameId').attr('src','page1.html')
					$('#pageTitle').html('表单2')
					
					
				})
				
				
			})
		</script>
	</body>
</html>
